<template>
    <NavBar>
    </NavBar>
    <ContentField v-if="classId == -1">
        <h2 style="text-align:center;margin-bottom: 10px;">您还未加入任何班级！！！</h2>
    </ContentField>
    <ContentField v-else>
    <h2 style="text-align:center;margin-bottom: 10px;">{{classId}}班</h2>
    <button class="btn btn-sm btn-success" style="width: 13%; margin-left:2%;" @click="leaveClass">退出班级</button>
    <button class="btn btn-sm btn-success" style="width: 13%; margin-left: 70%; margin-right: 2%;" @click="toClassSet">班级题集</button>

    <div class="container text-center" style="margin-top: 15px;margin-left:2%; margin-right:2%; width: 96%; height:40px; line-height:40px; border: 1px solid;">
    <div class="row">
        <div class="col">
            <div class="col" >班级id: {{classId}}</div>
        </div>
        <div class="col">
            <div class="col" >学生人数: {{cnt}}</div>
        </div>
        <div class="col">
            <div class="col" >教师id: {{tid}}</div>
        </div>
    </div>
    </div>
    

    <ContentField>
        <table class="table  table-primary  table-striped table-hover" style="margin-bottom: 10px;">
            <thead class="table-dark text-center" >
                <tr>
                <th scope="col">id</th>
                <th scope="col">学生id(studentId)</th>
                <th scope="col">学生姓名(name)</th>
                <th scope="col">班级id(cid)</th>
                </tr>
            </thead>
            <tbody class="text-center">
              <tr v-for=" (item, index) in students" :key="item.id">
                    <th>{{ index + 1 }}</th>
                    <td>{{ item.studentId }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.cid }}</td>
              </tr>
            </tbody>
        </table>

        <span aria-label="Page navigation example">
            <ul class="pagination" style="float:left">
                <li class="page-item disabled">
                    <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
                </li>
            </ul>

            <ul class="pagination" style="float:right">
                <li class='page-item'>
                    <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                    <a v-else class="page-link" @click="getPage( classId,prePage,pageSize )">上一页</a>
                </li>

                <li class="page-item" v-for="(item, index) in totalPage" :key="index">
                    <a  class="page-link" @click="getPage(classId, item,pageSize)">{{ item }}</a>
                </li>
                <li class= 'page-item'>
                    <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                    <a  v-else class="page-link" @click="getPage(classId, nextPage,pageSize )">下一页</a>  
                </li>
            </ul>
        </span>
    </ContentField>

    </ContentField>


</template>

<script>

 import NavBar from "@/components/student/NavBar/NavBar.vue";
 import ContentField from '@/components/commons/ContentField.vue';
 import {ref} from 'vue';
 //import { useRoute } from 'vue-router';
 import router from '@/router/index';
 import  {useStore}  from 'vuex';
 import $ from 'jquery';


 export default{
     name: 'MyClassView',
     components: {
        NavBar,
        ContentField,
     },

    setup(){

        //const route = useRoute();  //用于获取路由中的参数
        const store = useStore();

        let studentId = store.state.user.id;  //id存在于账户信息里面

        let classId = ref('');
        let name = ref('');



        let cnt = ref('');  //班级人数
        let students = ref([]);  //学生列表
        let tid = ref('');  //班级对应教师id


        let PageNum = 1 ;  //当前页数
        let PageSize = 4 ; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页

        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;


        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getRenderInfo = () => {

            const id = studentId;

            $.ajax({
                url: 'http://localhost:8090/sls/student/getStuInfoById/' + id ,
                type: "get",
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                    //console.log("resp:");
                    //console.log(resp);

                    classId.value = resp.cid;
                    name.value = resp.name;
                    const CId = classId.value;

                    

                    $.ajax({
                        url: 'http://localhost:8090/sls/class/getInfoByCId',
                        type: 'get',
                        data: {
                            CId: CId,
                        },
                        headers: {
                            Authorization: "Bearer " +store.state.user.token,
                        },

                     success(resp1){
                            // console.log("resp1: ");
                            // console.log(resp1);
                            cnt.value = resp1.cnt;
                            tid.value = resp1.tid;

                        $.ajax({
                            url: 'http://localhost:8090/sls/student/getStudentsPageInfo/' +CId + '/' + PageNum +'/' + PageSize ,
                            type: "get",
                            headers: {
                                Authorization: "Bearer " +store.state.user.token,
                            },

                        success(resp2){

                                // console.log("resp2: ");
                                // console.log(resp2);

                                students.value = resp2.list; 

                                totalNum.value = resp2.total;
                                totalPage.value = resp2.pages;
                                pageNum.value = resp2.pageNum;
                                pageSize.value = resp2.pageSize;
                                isFirstPage.value = resp2.isFirstPage;
                                isLastPage.value = resp2.isLastPage;
                                nextPage.value = resp2.nextPage;
                                prePage.value = resp2.prePage;

                                // console.log("students: ");
                                // console.log(students.value);

                                updatePageInfo(pageNum, pageSize);
                        
                            },
                            error(resp){
                                console.log(resp);
                            }
                        });


                    },
                    error(resp){
                        console.log(resp);
                    }
                    });

                },
                error(resp){
                    console.log(resp);
                }
            
            });
        };

        getRenderInfo();


        const getPage = (CId, PageNum, PageSize)=>{

            $.ajax({
                url: 'http://localhost:8090/sls/student/getStudentsPageInfo/' +CId + '/' + PageNum +'/' + PageSize ,
                type: "get",
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){
                    // console.log(resp);

                    students.value = resp.list; //获取所有班级信息

                    totalNum.value = resp.total;
                    totalPage.value = resp.pages;
                    pageNum.value = resp.pageNum;
                    pageSize.value = resp.pageSize;
                    isFirstPage.value = resp.isFirstPage;
                    isLastPage.value = resp.isLastPage;
                    nextPage.value = resp.nextPage;
                    prePage.value = resp.prePage;
                    updatePageInfo(pageNum, pageSize);

                },
                error(resp){
                    console.log(resp);
                }
            });

        }

        const leaveClass= () => {
            $.ajax({
                url: 'http://localhost:8090/sls/student/leaveClass/' + studentId ,
                type: "post",
                headers: {
                    Authorization: "Bearer " +store.state.user.token,
                },
                success(resp){

                    //console.log(resp);

                    if(resp.error_message === 'success'){
                        router.push({name: 'studentHome'});
                    }
                    else{
                        alert(resp.error_message);
                    }
                },
                error(resp){
                    console.log(resp);
                }
            });
        }

        const toClassSet = () => {
                router.push({name: 'S_classSet', params: {classId: classId.value}});
        }


        return{

           getRenderInfo,
           updatePageInfo,
           getPage,
           leaveClass,
           toClassSet,

           name,
           classId,
           studentId,
           students,

           cnt,
           tid,

           PageNum,
           PageSize,
           pageNum,
           pageSize,
           totalNum,
           totalPage,
           isFirstPage,
           isLastPage,
           nextPage,
           prePage,
        }

    }
  }
</script>



<style scoped>
</style>
